<template>
	<view v-if="data">
		<!-- 公共栏 -->
		<uni-notice-bar
			style="margin: 0;"
			showIcon
			single
			scrollable
			:speed="50"
			:text="msg"
		></uni-notice-bar>
		<!-- 轮播图 -->
		<!-- 轮播图自定义指示点 -->
		<uni-swiper-dot>
			<!-- 图片比例 1000x400  宽750rpx  高300rpx-->
			 <swiper
				:autoplay="true"
				:interval="3000"
				:duration="250"
				circular
			>
				<swiper-item>
					<image
						style="width: 100%;height: 100%;"
						src="/static/images/lunbo1.webp"
						mode=""
					></image>
				</swiper-item>
				<swiper-item>
					<image
						style="width: 100%;height: 100%;"
						src="/static/images/lunbo2.webp"
						mode=""
					></image>
				</swiper-item>
				<swiper-item>
					<image
						style="width: 100%;height: 100%;"
						src="/static/images/lunbo3.webp"
						mode=""
					></image>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<!-- 循环多个分类 -->
		<view v-for="(value, key) in data" :key="key">
			<!-- 商品分类 -->
			<view>
				<view class="header">
					<image :src="value.icon"  style="width: 30rpx;height: 30rpx;"></image>
					<text>{{ value.cate2Info[0].cate2Name }}</text>
				</view>
				<!-- 宫格布局 商品列表 -->
				<uni-grid
					:column="2"
					:square="false"
					:showBorder="false"
					:highlight="false"
				>
					<uni-grid-item
						v-for="(item, index) in value.list"
						:key="index"
					    style="display: flex;">
						<view class="item">
							<image :src="item.roomSrc"></image>
							<view>
								<view>{{item.nickname}}</view>
								<view>{{item.roomName}}</view>
							</view>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
		</view>
		<!-- 底部图标 -->
		<!-- 回到顶部 -->
		<view
			v-show="showGoTop"
			class="btn-gotop"
			hover-class="active"
			@click="doGoTop"
		>
			<uni-icons color="white" size="20" type="arrowthinup"></uni-icons>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 首页接口数据
			data: null,
			// 通告栏信息
			msg: '欢迎来到宅家直播!',
			//当前选中轮播
			current: 0,
			// 基础URL
			url: 'douyu/api/home/mix',
			// 是否显示回到顶部
			showGoTop: false
		};
	},
	mounted() {
		this.getData();
	},
	// 监听页面滚动
	onPageScroll(e) {
		this.showGoTop = e.scrollTop > 2000;
	},
	methods: {
		// 回到顶部
		doGoTop() {
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 250
			});
		},
		
		getData() {
			uni.request({
				url:this.url,
				method: 'GET',
				data: {},
				success: res => {
					
					this.data = res.data.data;
					console.log(this.data)
				},
				fail: () => {},
				complete: () => {}
			});
		}
	},
	computed: {
		// 轮播图片
		carouselItems() {
			return this.data.carouselItems;
		},
		// 首页推荐
		// recommendedItems() {
		// 	return this.data.recommendedItems;
		// }
		// 经过观察发现，页面UI是一样的，数据不同而已
		// 返回值数据组织成一个数组
	}
};
</script>

<style scoped lang="scss">
// 推荐头部
.header {
	padding: 15rpx;
	background-color: #eee;
	text {
		margin-left: 10rpx;
	}
}
// 每个商品
.item {
	margin: 6rpx;
	> image {
		width: 100%;
		height: 260rpx;
		border-radius: 10rpx;
	}
	> view {
		border-radius: 10px;
		padding: 10rpx;
		view {
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			&:first-child {
				font-weight: bold;
			}
			&:nth-child(2) {
				font-size: 0.8em;
				color: gray;
				margin: 4rpx 0;
			}
			&:nth-child(3) {
				color: red;
				font-size: 1.1em;
			}
		}
	}
}
// 回到顶部
.btn-gotop {
	position: fixed;
	right: 40rpx;
	bottom: 150rpx;

	width: 100rpx;
	height: 100rpx;
	background-color: rgba(0, 0, 0, 0.5);
	border-radius: 50%;
	border: 1px solid #999;
	display: flex;
	align-items: center;
	justify-content: center;
}
.active {
	opacity: 0.6;
}
</style>